<template>
    <div ref="vantaRef" class="vanta-background"></div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';
import * as THREE from 'three';
// import VANTA from 'vanta/dist/vanta.net.min';
import VANTA from 'vanta/dist/vanta.globe.min';

const vantaRef = ref<HTMLDivElement>();
let vantaEffect: any = null;

onMounted(() => {
    vantaEffect = VANTA({
        el: vantaRef.value,
        THREE: THREE,
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.00,
        minWidth: 200.00,
        scale: 1.00,
        scaleMobile: 1.00
    });
});

onUnmounted(() => {
    if (vantaEffect) {
        vantaEffect.destroy();
    }
});

</script>

<style scoped>
.vanta-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 在层级下面作背景 */
    z-index: -1;
}
</style>